Syn - Fullstack ReactJS App
Introduction
A website for people to vote on what colour comes to their mind when they listen to some classical music pieces, which then creatively displays the data through gradients and timestamps.
My reddit post on /r/reactjs currently sits at 28.6k views, 94% upvote rate, 15 total shares, and 134 upvotes.
So.. why did I make it? I made this website to practise full-stack web development, and to simultaneously share my passion in music with others. The pieces I chose to feature are from the Impressionist era, which has close ties to the Impressionist art movement in 19th century France. They both share similar aesthetic characteristics, focusing on atmosphere and mood, which I feel provides a listener/viewer with the creative flexibility when interpreting the works.
How to Use “Syn”
On Syn, you can vote the exact hexcode you “hear” at a specific timestamp in the music. Once submitted, all components that display data are re-rendered through a callback function to the parent component.
Above the player, each colored triangle represents a single vote. It is positioned by calculating (vote’s timestamp / songDuration) * 100%. It’s position is set to absolute in a container, and it’s left attribute is set to the value above.
It works pretty well, but gets cluttered when there are many votes. Future iterations should group hex codes together or hide some hex codes, or prioritise the votes with comments.
The data is retrieved from the database and displayed on the top right. To avoid a really long scrolling list, I limited the number of rows to 10.
The data is retrieved from the database and displayed on the top right. To avoid a really long scrolling list, I limited the number of rows to 10.
Supabase as backend: For more complex queries, you can write your own SQL code in the SQL Editor to create SQL functions and triggers. They can be created in SQL, PL/pgSQL, and more.
